<template>
  <div class="Home">
    <!-- <Count :countParent="10"></Count>
    <Count2 :countParent="10"></Count2>
    <watchs :countParent="10"></watchs> -->
    <h1>我是主页</h1>
    {{ name }}
    VUEX:{{ $store.state.num }}
    <a-button type="primary" style="width: 100px" @click="add()"
      >num++</a-button
    >
    <Test :num="20" @toPas="child" />
  </div>
</template>
<script lang="ts">
import store from "@/store";
import { defineComponent, onUnmounted, reactive, toRefs } from "vue";
import Test from "./page/test.vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    Test,
  },
  setup() {
    const store = useStore();
    onUnmounted(() => {
      console.log("我销毁了");
    });
    const state = reactive({
      name: "12",
    });
    const child = (value: string) => {
      console.log("child");
      state.name = value;
    };
    const add = () => {
      store.dispatch("asyncChangeNum");
    };
    return { ...toRefs(state), child, add };
  },
});
</script>

<style lang="less" scoped>
.Home {
  height: 100%;
  width: 100%;
  // text-align: center;
}
</style>
